<template>
  <div class="product">
    <!-- <div class="header-bar">产品</div> -->
    <van-tabs v-model="active" sticky swipeable>
      <!-- BTC -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <i class="icon iconfont icon-product"></i>
              {{name.coinPlanNameList[0].virtualWalletName}}
            </div>
          </div>
        </div>
        <div class="content">
          <!-- 活期分币计划 -->
          <div  v-if="isLogin==false">
          <router-link
            :to="{name: 'currentPlan' ,query:{annualInterestRate:name.currentPlan.annualInterestRate}}"
            tag="li"
            class="list-item"
          >
            <div class="tabs-con">
              <div class="currency">
                <span class="currency-text">分币宝活期</span>
                <van-tag plain color="#f2826a">{{name.coinPlanNameList[0].virtualWalletName}}</van-tag>
              </div>
              <div class="number">
                <div class="big-num">
                  {{name.currentPlan.annualInterestRate}}
                  <span>%</span>
                </div>
                <div class="word">今日年化利率</div>
              </div>
              <div class="flex link-box">
                <div class="link-box-l">
                  <van-icon name="label-o"></van-icon>优选理财
                </div>
                <div class="link-box-l">
                  <van-icon name="bill-o"></van-icon>灵活存取
                </div>
              </div>
            </div>
          </router-link >
        </div>
           <div @click="enter" v-if="isLogin==true">
               <router-link
            :to="{name: 'currentPlan' ,query:{annualInterestRate:name.currentPlan.annualInterestRate}}"
            tag="li"
            class="list-item"
          >
            <div class="tabs-con">
              <div class="currency">
                <span class="currency-text">分币宝活期</span>
                <van-tag plain color="#f2826a">{{name.coinPlanNameList[0].virtualWalletName}}</van-tag>
              </div>
              <div class="number">
                <div class="big-num">
                  {{name.currentPlan.annualInterestRate}}
                  <span>%</span>
                </div>
                <div class="word">今日年化利率</div>
              </div>
              <div class="flex link-box">
                <div class="link-box-l">
                  <van-icon name="label-o"></van-icon>优选理财
                </div>
                <div class="link-box-l">
                  <van-icon name="bill-o"></van-icon>灵活存取
                </div>
              </div>
            </div>
          </router-link >
          </div>
          <!-- 定期分币计划 -->
          <div class="tabs-list">
            <div class="list-title">分币计划</div>
            <ul>
              <li v-for="item in dataList" :key="item.index">
                <router-link
                  :to="{name: 'planDetails' ,query:{annualInterestRate:item.annualInterestRate,lockedDays:item.lockedDays,virtualWalletName:name.coinPlanNameList.virtualWalletName,productType:item.productType}}"
                  tag="li"
                  class="list-item"
                >
                  <div
                    class="item-title"
                  >{{name.coinPlanNameList[0].virtualWalletName}}{{item.lockedDays}}日抢先体验计划十九期</div>
                  <div class="flex item-box">
                    <div class="item-l">
                      <div class="num-big">
                        {{item.annualInterestRate}}
                        <span>%</span>
                      </div>
                      <div class="word">预期年化利率</div>
                    </div>
                    <div class="item-r">
                      <div class="num-big">
                        {{item.lockedDays}}
                        <span>天</span>
                      </div>
                      <div
                        class="word"
                      >{{item.productType}} {{name.coinPlanNameList[0].virtualWalletName}}起投</div>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <!-- USDT -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <i class="icon iconfont icon-product"></i>
              {{name.coinPlanNameList[1].virtualWalletName}}
            </div>
          </div>
        </div>
        <div class="content">
          <!-- 活期分币计划 -->
           <router-link
            :to="{name: 'currentPlan' ,query:{annualInterestRate:name.currentPlan.annualInterestRate}}"
            tag="li"
            class="list-item"
          >
          <div class="tabs-con">
            <div class="currency">
              <span class="currency-text">分币宝活期</span>
              <van-tag plain color="#f2826a">{{name.coinPlanNameList[1].virtualWalletName}}</van-tag>
            </div>
            <div class="number">
              <div class="big-num">
                {{name.currentPlan.annualInterestRate}}
                <span>%</span>
              </div>
              <div class="word">今日年化利率</div>
            </div>
            <div class="flex link-box">
              <div class="link-box-l">
                <van-icon name="label-o"></van-icon>优选理财
              </div>
              <div class="link-box-l">
                <van-icon name="bill-o"></van-icon>灵活存取
              </div>
            </div>
          </div>
            </router-link>
          <!-- 定期分币计划 -->
          <div class="tabs-list">
            <div class="list-title">分币计划</div>
            <ul>
              <li v-for="item in dataList" :key="item.index">
                <router-link
                  :to="{name: 'planDetails' ,query:{annualInterestRate:item.annualInterestRate,lockedDays:item.lockedDays,}}"
                  tag="li"
                  class="list-item"
                >
                  <div
                    class="item-title"
                  >{{name.coinPlanNameList[1].virtualWalletName}}{{item.lockedDays}}日抢先体验计划十九期</div>
                  <div class="flex item-box">
                    <div class="item-l">
                      <div class="num-big">
                        {{item.annualInterestRate}}
                        <span>%</span>
                      </div>
                      <div class="word">预期年化利率</div>
                    </div>
                    <div class="item-r">
                      <div class="num-big">
                        {{item.lockedDays}}
                        <span>天</span>
                      </div>
                      <div
                        class="word"
                      >{{item.productType}} {{name.coinPlanNameList[1].virtualWalletName}}起投</div>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <!-- ETH -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <i class="icon iconfont icon-product"></i>
              {{name.coinPlanNameList[2].virtualWalletName}}
            </div>
          </div>
        </div>
        <div class="content">
          <!-- 活期分币计划 -->
         <router-link
            :to="{name: 'currentPlan' ,query:{annualInterestRate:name.currentPlan.annualInterestRate}}"
            tag="li"
            class="list-item"
          >
          <div class="tabs-con">
            <div class="currency">
              <span class="currency-text">分币宝活期</span>
              <van-tag plain color="#f2826a">{{name.coinPlanNameList[2].virtualWalletName}}</van-tag>
            </div>
            <div class="number">
              <div class="big-num">
                {{name.currentPlan.annualInterestRate}}
                <span>%</span>
              </div>
              <div class="word">今日年化利率</div>
            </div>
            <div class="flex link-box">
              <div class="link-box-l">
                <van-icon name="label-o"></van-icon>优选理财
              </div>
              <div class="link-box-l">
                <van-icon name="bill-o"></van-icon>灵活存取
              </div>
            </div>
          </div>
        </router-link>
          <!-- 定期分币计划 -->
          <div class="tabs-list">
            <div class="list-title">分币计划</div>
            <ul>
              <li v-for="item in dataList" :key="item.index">
                <router-link
                  :to="{name: 'planDetails' ,query:{annualInterestRate:item.annualInterestRate,lockedDays:item.lockedDays,}}"
                  tag="li"
                  class="list-item"
                >
                  <div
                    class="item-title"
                  >{{name.coinPlanNameList[2].virtualWalletName}}{{item.lockedDays}}日抢先体验计划十九期</div>
                  <div class="flex item-box">
                    <div class="item-l">
                      <div class="num-big">
                        {{item.annualInterestRate}}
                        <span>%</span>
                      </div>
                      <div class="word">预期年化利率</div>
                    </div>
                    <div class="item-r">
                      <div class="num-big">
                        {{item.lockedDays}}
                        <span>天</span>
                      </div>
                      <div
                        class="word"
                      >{{item.productType}} {{name.coinPlanNameList[2].virtualWalletName}}起投</div>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <!-- EOS -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <i class="icon iconfont icon-product"></i>
              {{name.coinPlanNameList[3].virtualWalletName}}
            </div>
          </div>
        </div>
        <div class="content">
          <!-- 活期分币计划 -->
         <router-link
            :to="{name: 'currentPlan' ,query:{annualInterestRate:name.currentPlan.annualInterestRate}}"
            tag="li"
            class="list-item"
          >
          <div class="tabs-con">
            <div class="currency">
              <span class="currency-text">分币宝活期</span>
              <van-tag plain color="#f2826a">{{name.coinPlanNameList[3].virtualWalletName}}</van-tag>
            </div>
            <div class="number">
              <div class="big-num">
                {{name.currentPlan.annualInterestRate}}
                <span>%</span>
              </div>
              <div class="word">今日年化利率</div>
            </div>
            <div class="flex link-box">
              <div class="link-box-l">
                <van-icon name="label-o"></van-icon>优选理财
              </div>
              <div class="link-box-l">
                <van-icon name="bill-o"></van-icon>灵活存取
              </div>
            </div>
          </div>
        </router-link>

       
          <!-- 定期分币计划 -->
          <div class="tabs-list">
            <div class="list-title">分币计划</div>
            <ul>
              <li v-for="item in dataList" :key="item.index">
                <router-link
                  :to="{name: 'planDetails' ,query:{annualInterestRate:item.annualInterestRate,lockedDays:item.lockedDays,}}"
                  tag="li"
                  class="list-item"
                >
                  <div
                    class="item-title"
                  >{{name.coinPlanNameList[3].virtualWalletName}}{{item.lockedDays}}日抢先体验计划十九期</div>
                  <div class="flex item-box">
                    <div class="item-l">
                      <div class="num-big">
                        {{item.annualInterestRate}}
                        <span>%</span>
                      </div>
                      <div class="word">预期年化利率</div>
                    </div>
                    <div class="item-r">
                      <div class="num-big">
                        {{item.lockedDays}}
                        <span>天</span>
                      </div>
                      <div
                        class="word"
                      >{{item.productType}} {{name.coinPlanNameList[3].virtualWalletName}}起投</div>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
      <!-- FBP -->
      <van-tab>
        <div slot="title">
          <div class="tabs">
            <div class="tabs-item">
              <i class="icon iconfont icon-product"></i>
              {{name.coinPlanNameList[4].virtualWalletName}}
            </div>
          </div>
        </div>
        <div class="content">
          <!-- 活期分币计划 -->
         <router-link
            :to="{name: 'currentPlan' ,query:{annualInterestRate:name.currentPlan.annualInterestRate}}"
            tag="li"
            class="list-item"
          >
          <div class="tabs-con">
            <div class="currency">
              <span class="currency-text">分币宝活期</span>
              <van-tag plain color="#f2826a">{{name.coinPlanNameList[4].virtualWalletName}}</van-tag>
            </div>
            <div class="number">
              <div class="big-num">
                {{name.currentPlan.annualInterestRate}}
                <span>%</span>
              </div>
              <div class="word">今日年化利率</div>
            </div>
            <div class="flex link-box">
              <div class="link-box-l">
                <van-icon name="label-o"></van-icon>优选理财
              </div>
              <div class="link-box-l">
                <van-icon name="bill-o"></van-icon>灵活存取
              </div>
            </div>
          </div>
         </router-link>
          <!-- 定期分币计划 -->
          <div class="tabs-list">
            <div class="list-title">分币计划</div>
            <ul>
              <li v-for="item in dataList" :key="item.index">
                <router-link
                  :to="{name: 'planDetails' ,query:{annualInterestRate:item.annualInterestRate,lockedDays:item.lockedDays,}}"
                  tag="li"
                  class="list-item"
                >
                  <div
                    class="item-title"
                  >{{name.coinPlanNameList[4].virtualWalletName}}{{item.lockedDays}}日抢先体验计划十九期</div>
                  <div class="flex item-box">
                    <div class="item-l">
                      <div class="num-big">
                        {{item.annualInterestRate}}
                        <span>%</span>
                      </div>
                      <div class="word">预期年化利率</div>
                    </div>
                    <div class="item-r">
                      <div class="num-big">
                        {{item.lockedDays}}
                        <span>天</span>
                      </div>
                      <div
                        class="word"
                      >{{item.productType}} {{name.coinPlanNameList[4].virtualWalletName}}起投</div>
                    </div>
                  </div>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import vue from "vue";
import axios from "axios";
import { coinPlan } from "../../axios/api.js";
import { NavBar, Tab, Tabs, Icon, Tag } from "vant";
export default {
  name: "product",
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Tag.name]: Tag
  },
  data() {
    return {
      active: 0,
      data: {
        page: "1",
        rows: "6"
      },
      name: "",
      dataList: [],
      isLogin: false,
    };
  },
  methods: {
     //进入注册页
        enter() {
            this.$router.push("/login");
        },
  },
  created() {
    coinPlan({
      params: this.data
    }).then(res => {
      console.log(res.data.data);
      this.name = res.data.data;
      console.log(this.name);
      this.dataList = res.data.data.listCoinPlan;
      console.log(this.dataList);
    });
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
/deep/.van-tab {
  color: @base_textColor;
}
/deep/ .van-tabs__line {
  background-color: #ff976a;
}
/deep/ .van-tab--active {
  color: #ff976a;
}
/deep/ .van-tabs__wrap {
  position: relative;
}
/deep/ .van-hairline--bottom::after {
  border-bottom-width: 0;
}
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
}
/deep/ .van-tabs--line {
  padding-top: 0;
}
.product {
  height: 100%;
  margin-bottom: 70px;
  overflow: hidden;
  position: relative;
  .header-bar {
    position: fixed;
    top: 0;
    z-index: 99;
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 46px;
    background-color: #fff;
    color: #323233;
    font-size: 16px;
    font-weight: 500;
  }
  .tabs {
    .tabs-item {
      i {
        margin-right: 2px;
      }
    }
  }
  // 分币计划
  .content {
    background: #fff;
    // 活期分币计划
    .tabs-con {
      padding: 10px;
      .currency {
        text-align: left;
        .currency-text {
          font-size: @base_textSize;
          font-weight: bold;
          color: @base_textColor;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
      .number {
        margin: 15px 0;
        .big-num {
          font-size: 3em;
          color: #f2826a;
          span {
            font-size: 0.6em;
          }
        }
        .word {
          margin-top: 5px;
          font-size: 12px;
          color: #969799f5;
        }
      }
      .link-box {
        .link-box-l {
          margin: 0 15px;
          font-size: 14px;
          color: #969799f5;
          i {
            font-size: 16px;
            color: #f2826a;
            vertical-align: text-top;
          }
        }
      }
    }
    // 定期分币计划
    .tabs-list {
      margin-top: 10px;
      .list-title {
        text-align: left;
        font-size: @base_textSize;
        font-weight: bold;
        color: @base_textColor;
        border-bottom: @base_boder;
        background: @base_background;
        padding: 10px;
      }
      .list-item:last-child {
        border-bottom: none;
      }
      .list-item {
        padding-left: 10px;
        background: @base_background;
        border-bottom: @base_boder;
        .item-title {
          text-align: left;
          padding: 10px;
          font-size: @base_textSize;
          color: @base_textColor;
        }
        .item-box {
          padding-bottom: 10px;
          .item-l {
            width: 50%;
            text-align: left;
            padding-left: 25px;
            .num-big {
              font-size: 2em;
              color: #f2826a;
              span {
                font-size: 0.6em;
              }
            }
            .word {
              margin-top: 5px;
              color: #969799f5;
            }
          }
          .item-r {
            width: 50%;
            text-align: left;
            padding-left: 25px;
            .num-big {
              font-size: 2em;
              color: @base_textColor;
              span {
                font-size: 0.6em;
              }
            }
            .word {
              margin-top: 5px;
              color: #969799f5;
            }
          }
        }
      }
    }
  }
}
</style>

